<template>
  <div>
    <a-modal
      title="服药登记详情"
      :width="450"
      :visible="visible"
      :footer="null"
      @cancel="handleCancel"
    >
      <div class="content">
        <div class="mg-b mg-l">姓名： {{ details.childName }}</div>
        <div class="mg-b">服药时间： {{ details.medicationTime }}</div>
        <div class="mg-b">服药说明： {{ details.explain }}</div>
        <div class="flex">
          <div class="mg-b">药品图片： </div>
          <div class="imgBox">
            <img
              class="img-item"
              v-for="(item, index) in imgList"
              :key="index"
              :src="item"
            >
          </div>
        </div>
        <div class="flex">
          <div class="mg-b">家长签名： </div>
          <div class="imgBox">
            <img
              class="img-item"
              :src="details.autographImg"
            ></div>
        </div>
        <a-divider />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getMRegisterDetail } from '@/api/modular/garden/medicationregistration'
export default {
   data(){
    return {
        visible:false,
        details:{},
        imgList:[],
        imgTitle: '',
    }
   },
   mounted(){
    this.imgTitle = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id=';
  },

   methods:{
    check(record){
        this.visible = true
        getMRegisterDetail(record.id).then(res=>{
            const { code , data } = res
            if(code==200){
                this.details = data
                let _imgs = data.drugsImage==null? [] : data.drugsImage
                this.imgList = _imgs.map(item => {
                  return this.imgTitle + item.filedId;
               })
            }
        })
    },
    handleCancel () {
        this.visible = false
      },
   }
}
</script>

<style scoped>
.content{
    font-size: 15px;
}
.mg-b{
    margin-bottom: 10px;
}
.mg-l{
    margin-left: 30px;
}

.img-item {
  width: 100px;
  padding-top: 3px;
}
.flex{
    display: flex;
    margin-bottom: 20px;
}

</style>